<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="脱敏脱密名称">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入脱敏脱密名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建脱敏脱密规则</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb
        ref="httbRef"
        width="250" 
        :btn-is-show="btnIsShow"
        :table-col="tabUserList"
        :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData"
        @refresh="getUserList"
      />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
          <el-form-item label="脱敏脱密名称" prop="desensitizationName">
            <el-input v-model="ruleForm['desensitizationName']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
          <!-- dataModelName -->
          <el-form-item label="脱敏脱密模型" prop="dataModelId">
             <el-select 
                :disabled="disFlag" 
                v-model="ruleForm['dataModelId']"
                @change="getFields"
                clearable placeholder="">
                <el-option
                v-for="(item,i) in listOptions1"
                :key="i"
                :label="item.dataModelName"
                :value="item.id"
                />
            </el-select>
          </el-form-item>
          <el-form-item label="脱敏脱密字段" prop="desensitizationFieldName">
             <el-select 
                :disabled="disFlag" 
                v-model="ruleForm['desensitizationFieldName']"
                clearable placeholder="">
                <el-option
                v-for="(item,i) in listOptions2"
                :key="i"
                :label="item.fieldName"
                :value="item.fieldName"
                />
            </el-select>
          </el-form-item>
          <!-- desensitizationTypeName -->
          <el-form-item label="脱敏脱密类型" prop="desensitizationTypeNum">
             <el-select 
                :disabled="disFlag" 
                v-model="ruleForm['desensitizationTypeNum']"
                @change="getChildrenList"
                clearable placeholder="">
                <el-option
                v-for="(item,i) in selectDataList"
                :key="i"
                :label="item.name"
                :value="item.num"
                />
            </el-select>
          </el-form-item>
          <!-- desensitizationRuleTypeName -->
          <el-form-item label="脱敏脱密规则" prop="desensitizationRuleTypeNum">
            <el-select 
                :disabled="disFlag" 
                v-model="ruleForm['desensitizationRuleTypeNum']"
                @change="getdesensitizationRuleTypeNumName"
                clearable placeholder="">
                <el-option
                v-for="(item,i) in listOptions4"
                :key="i"
                :label="item.name"
                :value="item.num"
                />
            </el-select>
          </el-form-item>
        </el-form>
        <div v-if="!disFlag" style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { 
    dataModeldatagetList,
    codequery,
    desensitizationrulegetList, 
    desensitizationrulesaveOne, 
    desensitizationruleupdateById, 
    desensitizationruledeleteByIds } from '@/api/zt/index'
  import experiment from '@/mixins/experiment'
  
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        listOptions1:[],
        listOptions2:[],
        listOptions3:[],
        listOptions4:[],
        btnIsShow: {
          operate: true,
          detile: true,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {
          desensitizationName: [
            { required: true, message: '请输入脱敏脱密名称', trigger: 'change' }
          ],
          dataModelId: [
              { required: true, message: '请选择脱敏脱密模型', trigger: 'change' }
          ],
          desensitizationTypeNum: [
              { required: true, message: '请选择脱敏脱密类型', trigger: 'change' }
          ],
          desensitizationRuleTypeNum: [
              { required: true, message: '请选择脱敏脱密规则', trigger: 'change' }
          ]
        },
        dialogTableVisible: false,
        ruleForm: {
            "desensitizationName": "",
            "desensitizationFieldName": "",
            "desensitizationRuleTypeName": "",
            "desensitizationTypeName": "",
            "desensitizationRuleTypeNum": '',
            "dataModelName": "",
            "desensitizationTypeNum":'',
            "dataModelId":''
        },
        userId: '',
        formInline: {
          'dataModelName': ''
        },
        tableUserData: [],
        selectDataList:[],
        tabUserList: [
          {
            key: 'desensitizationName',
            title: '脱敏脱密名称'
          },
          {
            key: 'desensitizationFieldName',
            title: '脱敏脱密字段'
          },
          {
            key: 'desensitizationTypeName',
            title: '脱敏脱密类型'
          },
          {
            key: 'desensitizationRuleTypeName',
            title: '脱敏脱密规则'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
  
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
        this.getcodequery('desensitizationType')

        dataModeldatagetList({
        'pageIndex':1,
        'dataModelName':'',
        'dataModelTypeId': null,
        'pageSize':1000
      }).then(res => {
        this.listOptions1 = res.data.records
      })
    
     
      })
      
    },
    methods: {
        getChildrenList(){
            codequery({
                "type": "desensitizationRuleType",
                "parentNum":this.ruleForm['desensitizationTypeNum']
            }).then(res => {
                this.listOptions4 = res.data.records
            })
            this.selectDataList.forEach((item,index)=>{
                if(item.num==this.ruleForm['desensitizationTypeNum']){
                  this.ruleForm['desensitizationTypeName'] = item.name
                }
            })
        },
        getdesensitizationRuleTypeNumName(){
          this.listOptions4.forEach((item,index)=>{
                if(item.num==this.ruleForm['desensitizationRuleTypeNum']){
                  this.ruleForm['desensitizationRuleTypeName'] = item.name
                }
            })
        },
        getFields(){
            
            this.listOptions2 = []
            this.ruleForm['desensitizationFieldName'] = ''
            
            this.listOptions1.forEach((item,index)=>{
                if(item.id==this.ruleForm['dataModelId']){
                  this.ruleForm['dataModelName'] = item.dataModelName
                  this.listOptions2 = item.fields||[]
                }
            })
        },
        deleteSelectData(v) {
            desensitizationruledeleteByIds([{ id: v.id }]).then(res => {
            if (res.code == 200) {
                this.getUserList()
            } else {
                this.errorDialog(res.msg)
            }
            })
        },
        handleNodeClick(data) { },
        commitFromData() {
            if (this.ruleForm.hasOwnProperty('id')) {
            desensitizationruleupdateById(this.ruleForm).then(res => {
                if (res.code == 200) {
                this.getUserList()
                } else {
                this.errorDialog(res.msg)
                }
            })
            } else {
            desensitizationrulesaveOne(this.ruleForm).then(res => {
                if (res.code == 200) {
                this.getUserList()
                } else {
                this.errorDialog(res.msg)
                }
            })
            }
        },
        handleSizeChange(v) {
          this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },
    
        // 获取用户列表
        getUserList() {
            this.dialogTableVisible = false
            this.$refs.httbRef.isShowLoading(true)
            desensitizationrulegetList({
            'pageIndex': this.page,
            'pageSize': this.size,
            'desensitizationName': this.formInline.dataModelName
            }).then(res => {
            this.tableUserData = res.data.records
            this.total = res.data.total
            this.$refs.httbRef.isShowLoading(false)
            })
        }
        }
    }
  </script>
  
        <style lang="scss" scoped>
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .el-form-item{
            width:50%;
          }
        }
        
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
  